@font-face {
  font-family: 'icons';
  src: url('/font/icons.eot?83223639');
  src: url('/font/icons.eot?83223639#iefix') format('embedded-opentype'),
	   url('/font/icons.woff?83223639') format('woff'),
	   url('/font/icons.ttf?83223639') format('truetype'),
	   url('/font/icons.svg?83223639#icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'dbicons';
  src: url('/font/dbicons.eot?83223639');
  src: url('/font/dbicons.eot?83223639#iefix') format('embedded-opentype'),
	   url('/font/dbicons.woff?83223639') format('woff'),
	   url('/font/dbicons.ttf?83223639') format('truetype'),
	   url('/font/dbicons.svg?83223639#icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* For Webkit browsers (e.g., Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 4px; /* Width of the vertical scrollbar */
    height: 4px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: #888; /* Background of the track */
}

::-webkit-scrollbar-thumb {
    background: #f1f1f1; /* Color of the thumb */
    border-radius: 2px; /* Roundness of the thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color of the thumb when hovered */
}

/* For Firefox */
* {
    scrollbar-width: thin; /* Makes the scrollbar thin */
    scrollbar-color: #f1f1f1 #888; /* Thumb color and track color */
}


body {
	margin: 0;
	font-family: Arial, sans-serif;
	display: flex;
	height: 100vh;
	overflow:hidden;
}

a{
	cursor: pointer;
}

.main{
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.chat-header {
	padding: 5px;
	background-color: black;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pinned-message {
	padding: 5px;
	background-color: white;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height:40px;
}

.chat-header img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 10px;
	valign: top;
	vertical-align:middle;
}
.chat-header .burgermenu {
	cursor: pointer;
	margin-right:10px;
	position:relative;
	text-align:right;

}

.chatmenu {
	display:flex;
	width:0px;
	overflow:hidden;
	transition: width 0.5s;
	text-align;right;
	cursor:pointer;
}

.chatmenu .element{
	flex:1;
	font-family:icons;
	display:inline-block;
	font-size:20px;
	margin:0px 5px;
}

.chatmenu .element:hover{
	color:red;
}

.revealChatMenu{
	width:120px;
}

.attachment{
	display:flex;
	height:35px;
	background-color: #0078D7;
	padding:10px;
	line-height:30px;
	border-radius:10px;
	color:white;
	margin-bottom:5px;
	overflow:hidden;
	cursor: pointer;
	transition:1s;
}

.attachment:hover{
	background-color: #209bff;
}

.attachment_icon{
	flex: 1;
	background-color: #58b2f8;
	border-radius:45px;
	max-width:30px;
	width:30px;
	height:30px;
	vertical-align:middle;
	margin-right:10px;
}

.downloadarrow{
	position:absolute; 
	left:15px; 
	bottom:15px; 
	cursor:pointer; 
	background-color:rgba(0,0,0,0.5); 
	color:white; 
	font-weight:bold; 
	border:2px solid white; 
	display:block; 
	width:30px; 
	height:30px; 
	line-height:30px; 
	text-align:center; 
	border-radius:45px;
	transition: 1s;
}

.downloadarrow:hover{
	background-color:rgba(255,255,255,1); 
	color:black;
	border:2px solid black;
}

.messages {
	flex: 1;
	padding: 15px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x:hidden;
	background-color:#2980B9;
}
.message {
	margin-bottom: 10px;
}
.message.sent {
	text-align: right;
}
.message .bubble {
	display: inline-block;
	padding: 10px;
	border-radius: 10px 10px 10px 0px;
	min-width: 200px;
	max-width: 400px;
	word-wrap: break-word;
	position:relative;
}

.bubble:not(.highlighted)::before{
	display:block;
	background-color:transparent;
	width:10px;
	height:20px;
	content:'.';
	color:transparent;
	position:absolute;
	left:-10px;
	bottom:0px;
	border-left:10px solid transparent;
	border-top:5px solid transparent;
	border-bottom:10px solid white;
	border-right:10px solid white;
}

.highlighted::before{
	display:block;
	background-color:transparent;
	width:10px;
	height:20px;
	content:'.';
	color:transparent;
	position:absolute;
	left:-10px;
	bottom:0px;
	border-left:10px solid transparent;
	border-top:5px solid transparent;
	border-bottom:10px solid #ff8;
	border-right:10px solid transparent;
}

.bubble{
	box-shadow:1px 1px 5px rgba(0,0,0,0.2);
	position:relative;
}

.message.sent .bubble {
	background-color: #DCF8C6;
}
.message.received .bubble {
	background-color: #fff;
}

.highlighted {
	background-color: #ff8 !important;
	border:1px solid darkorange;
}

.bubble a{
	text-decoration:none;
	color:navy;
}

.bubble a:hover{
	text-decoration:underline;
	color:navy;
}

.revealControls{
	font-family:"icons";
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	font-size: 15px;
	font-weight:bold;
}

.controls{
	visibility:hidden;
	font-family:"icons";
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	display:inline-block;
	max-height:15px;
	transition: 0.5s;
	width:0px;
	overflow:hidden !important;
	clear:both;
	text-align:top;
	vertical-align:top;
}


.bubble:hover .controls{
	visibility:visible;
}


.controls a{
	display:inline-block;
	width:20px;
	height:15px;
	text-decoration:none !important;
	font-size:15px !important;
}

.controls a:hover{
	color:red !important;
}

.message .subtext {
	font-size: 10px;
	color: #666;
	margin-top: 5px;
	float:right;
	clear:both;
}

.subtext{
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
.subtext-image {
	font-size: 10px;
	color: #666;
	margin-top: 20px;
	
}

.message .image-message {
	max-width: 200px;
	max-height: 200px;
}
.message .link-preview {
	display: flex;
	flex-direction: column;
	border: 1px solid #ccc;
	border-radius: 5px;
	overflow: hidden;
	max-width: 400px; /* Limit the width to 300px */
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */

}
.message .link-preview img {
	max-width: 100%;
}
.message .link-preview .link-details {
	padding: 5px;
	background-color: #f7f7f7;
}
.message .link-preview .link-title {
	font-weight: bold;
}
.message .link-preview .link-url {
	font-size: 12px;
	color: #666;
}

.link:before{
	font-family:"icons";
	content:' ';
}

.edit-info {
	padding: 5px;
	background-color: #f7f7f7;
	display: flex;
	gap: 10px;
	position:relative;
	height:20px;
	z-index:0;
	margin-bottom:-32px;
	transition:margin 1s;
}

.edit-content{
	height:20px;
	overflow:hidden;
	width:80%;
}

.rise {
	margin-bottom:0px;
}

.chat-input {
	padding: 10px;
	background-color: #f7f7f7;
	display: flex;
	gap: 2px;
	position:relative;
	height:50px;
}
.chat-input input, {
	flex: 1;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.textinput{
	color: #0078D7; 
	width:80%; 
	height:30px; 
	text-align:center; 
	font-size:20px; 
	border:0px; 
	border-right:1px solid black;
	border-bottom:1px solid black;
}

.chat-input .textarea-container {
	flex: 1;
	position: relative;
}

.chat-input textarea{
	position:absolute;
	height:75%;
	width:98%;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding:5px;
	transition: 1s;
	resize: none;
}

.resized{
	margin-top:-150px !important;
	height:375% !important;
	border: 1px solid #777 !important;
	transition: 1s;
}

.flash-red {
    background-color: #ff5555 !important;
    transition: background-color 0.5s ease;
}
.textarea-close {
	width:30px; 
	height:30px; 
	position:absolute; 
	right:4px; 
	top:-181px;
	display:none;
	transition:display 1s;
	font-family:icons;
	text-align:center;
	line-height:30px;
	color:white;
	text-shadow:1px 1px 1px black;
	cursor:pointer;
}

.visible {
	display:block !important; 
}

#postoptions {
	display:none; 
	position:absolute; 
	box-shadow:1px 1px 10px rgba(0,0,0,0.9); 
	border-radius:10px; 
	top:-150px; 
	left:-250px; 
	min-width:300px; 
	
	background-color:white;
	padding:15px;
}

.chat-input button {
	padding: 10px;
	border: 1px solid white;
	background-color: #0078D7;
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
}

.button {
	padding: 10px;
	border: none;
	background-color: #0078D7;
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
	transition:1s;
}

.buttonred {
	background-color: red !important;
}

.redborder {
	border: 1px solid red !important;
}

.button:hover {
	background-color: #209bff;
}

.formInput{
	color: #0078D7; 
	width:80%; 
	height:30px; 
	text-align:center; 
	font-size:20px; 
	border:0px; 
	border-right:1px solid black;
	border-bottom:1px solid black;
}

.chat-input button:hover {
	background-color: #005BB5;
}
.imagemodal, .dialogmodal{
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center;    /* Vertically center */
    height: 100vh; 
	background-color:rgba(0,0,0,0.5);
}
.imagemodal img{
	max-height:90%;
	max-width:90%;
	width:auto !important;
	text-align: center;
}

.closemodal{
	background-color:rgba(255,255,255,0.5);
	color:white;
	padding:5px;
	cursor: pointer;
	display:block;
	display:none;
}

.dialogbutton{
	cursor:pointer;
	float:right;
	font-weight:bold;
	padding:5px 15px;
}

.dialogbutton:hover{
	background-color:#ddd;
}

#loader{
	visibility:hidden;
	width:0px;
	height:0px;
	border:0px;		
}

.pinned-message{
	cursor: pointer;
}

.settings-button{
	min-width:120px; 
	height:100px; 
	border-radius:5px; 
	border:1px solid #0078D7;
	display:block;
	margin:0 auto;
	color: #0078D7;
	font-size:12px;
	font-weight:bold;
	cursor:pointer;
}

.settings-button:hover {
	background-color: #0078D7;
	color: #fff;
}

.section{
	border:1px solid grey;
	border-radius:15px;
	padding:5px 15px;
	margin-top:8px;
}
